<template>
   <div id="mine" style="width: 95%; height: 99%; background-color:rgba(255, 255, 255,0.5);margin-left: 15px"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
import { Add } from '../units/api';
//图表

const rlue=ref([])
const rlue_one=ref([])
async function List() {
   let res = await Add({})
   let ary = ref([])
   let arry = ref([])
   // console.log("res",res.data.data.taskCountOfDepartment)
   for (let i = 0; i < res.data.data.taskCountOfDepartment.length; i++) {
      ary.value=res.data.data.taskCountOfDepartment[i].title
      arry.value=res.data.data.taskCountOfDepartment[i].count
      rlue.value.push(res.data.data.taskCountOfDepartment[i].title)
      rlue_one.value.push(res.data.data.taskCountOfDepartment[i].count)
      // option.yAxis[0].data= res.data.data.taskCountOfDepartment[i].title
      // console.log()
      // option.xAxis = res.data.data.taskCountOfDepartment
      // option.yAxis[0].data.push(ary.value)
      // option.series[0].data.push(arry.value)
   }
  onpe()
   
   console.log('777777', rlue.value);
}


function onpe(){
   var chartDom = document.getElementById('mine');
   var myChart = echarts.init(chartDom);

 const option = {
   legend: {
      data: ["任务数", "上报率"],
      icon: 'circle',
      top: '0%',
      textStyle: {
         color: '#333',
      },
   },
   //提示框
   tooltip: {
      trigger: 'axis',
      showDelay: 0,
      extraCssText: 'padding:15px;font-size:10px',
      axisPointer: {
         show: true,
         type: 'shadow',
      }
   },
   grid: {
      left: '4%',
      right: '10%',
      top: '3%',
      bottom: '13%',
      containLabel: true
   },
   yAxis: [{
      type: 'category',
      data:rlue.value,
      axisLine: {
         show: true
      },
      axisTick: {
         show: true
      },
   }],
   xAxis: [{
      type: 'value',
      name: '客车（辆）',
      axisLine: {
         show: false
      },
      axisTick: {
         show: false
      },
   }, {
      type: 'value',
      name: '动车（列）',
      axisLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      // axisLabel: {
      //     show: true,
      // },
   }],
   series: [{
      name: '任务数',
      type: 'bar',
      // color: '#a3a7f4',
      xAxisIndex: 0,
      barWidth: 12,
      itemStyle: {
         emphasis: {
            barBorderRadius: 4
         },
         normal: {
            barBorderRadius: 4,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
               offset: 0,
               color: '#BDB76B' // 0% 处的颜色
            }, {
               offset: 1,
               color: '#808000' // 100% 处的颜色
            }], false),
            barBorderRadius: [0, 45, 45, 0]
         }
      },
      data:rlue_one.value
   },
   {
      name: '上报率',
      type: 'bar',
      // color: '#a476f5',
      xAxisIndex: 1,
      barWidth: 12,
      itemStyle: {
         emphasis: {
            barBorderRadius: 4
         },
         normal: {
            barBorderRadius: 4,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
               offset: 0,
               color: '#FFA500' // 0% 处的颜色
            }, {
               offset: 1,
               color: '#FF8C00' // 100% 处的颜色
            }], false),
            barBorderRadius: [0, 45, 45, 0]
         }
      },
      data: [],
   },

   ]
};
option && myChart.setOption(option);

}

List()
onMounted(() => {
})


</script>

<style lang="scss" scoped></style>